<!DOCTYPE html>
<html lang="en" ng-app="demo">
    <head>
        <meta charset="utf-8">
        <title>AngularJS ui-event</title>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">

        <!-- ui-event files -->
        <script src="../dist/event.js"></script>

        <style>
            body {
                padding: 15px;
            }
        </style>
    </head>

    <body class="container">

        <script>
            var app = angular.module('demo', ['ui.event']);
            app.controller('EventCtrl', function($scope) {
                $scope.blurCallback = function(evt) {
                    alert('Goodbye. Input content is: ' + evt.target.value);
                };
            });
        </script>
        <section id="event" ng-controller="EventCtrl">
            <div class="page-header">
                <h1>Event Binder</h1>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h3>What?</h3>

                    <p>Bind a callback to any event not natively supported by Angular.</p>

                    <p class="well"><input value="Focus and then Blur this input" ui-event="{ blur : 'blurCallback($event)' } " style="width: 100%"></p>

                    <h3>Why?</h3>

                    <p>For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.</p>
                </div>
                <div class="col-md-6">
                    <h3>How?</h3>

                    <p>You can pass multiple events as an object, along with the jQuery event itself:</p>
                    <pre class="prettyprint">
&lt;input ui-event=&quot;{ blur : 'blurCallback($event)' }&quot;&gt;

&lt;script&gt;
$scope.blurCallback = function(evt) {
alert(&#x27;Goodbye. Input content is: &#x27; + evt.target.value);
};
&lt;/script&gt;
                    </pre>
                </div>
            </div>
        </section>
    </body>
</html>